<template>
    <div class="bigBox">
      <div class="searchBox">
        <div class="zuo">
          <span>
            统计时间：   
          </span>
          <el-date-picker
            size="small"
            v-model="searchDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy - MM - dd"
            value-format="yyyy-MM-dd"
          >
        </el-date-picker>
      </div>
      <div class="you">
        <div @click="searchTimeCheck(0)" class="days" :class="{border : is_border == 0}">今</div>
        <div @click="searchTimeCheck(1)" class="days" :class="{border : is_border == 1}">昨</div>
        <div @click="searchTimeCheck(2)" class="days" :class="{border : is_border == 2}">近7天</div>
        <div @click="searchTimeCheck(3)" class="days" :class="{border : is_border == 3}">近30天</div>
      </div>
      <div class="btns">
        <el-button class="search" @click="search">查询</el-button>
        <el-button class="reset">重置</el-button>
      </div>
      </div>
        <div class="bbb">

            <div class="h2">
                <h2>优惠券数据展览</h2>
                <div class="topBox">
                    <div class="top_box_item" v-for="(item,index) in topList" :key="index">
                        <div class="top_box_data">
                            <div class="data_top">{{ item.data }}</div>
                            <div class="data_bottom">{{ item.title }}</div>
                            <div class="data_circle"> <span>环比</span></div>
                        </div>
                        <div class="icon">
                            <img :src="item.url" alt="充电总量">
                        </div>
                        <span  class="circle_data">{{ item.circle }}%</span>
                    </div>
                </div>
            </div>
            <h2>指标趋势</h2>
            <div class="eCharts">
                <div id="chongdianliang" style="width:100%;height: 260px;">1111</div>
            </div>
        </div>
        <div class="bottom_box">
            <el-table
            :header-cell-style="{background:'#e8efff',color:'#000000'}"
            :data="couponTableData"
            :loading="loading"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column prop="order" label="序号" width="60">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.order }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="优惠券名称">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        <span v-if="scope.row.type == 0">折扣券</span>
                        <span v-if="scope.row.type == 1">抵扣券</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="userId" label="用户ID">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.userId }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="draw_time" label="领取时间">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                      {{ scope.row.draw_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        <span v-if="scope.row.state == 0">未使用</span>
                        <span v-if="scope.row.state == 1">已使用</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template v-slot="scope">
                    <div class="scope" style="color:#949BBE;">
                        <span class="detailBtn" @click="goDetail(scope.row.id,scope.row.order_type)">查看明细</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 明细 -->
        <el-dialog center :close-on-click-modal="false" width="636px" top="18vh" :visible.sync="detailVisible">
            <template slot="title">
                <div class="dialog_title">
                    {{ alert_title }}
                </div>
            </template>
            <el-form label-position="right" label-width="120px" :model="couponForm">
                <el-form-item prop="real_pay" label="用户ID:" >
                    <el-input :disabled="disabled" v-model="couponForm.real_pay" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="money" label="优惠券名称:">
                    <el-input :disabled="disabled" v-model="couponForm.real_pay" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="money" label="类型:">
                    <el-input :disabled="disabled" v-model="couponForm.money" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="money" label="状态:">
                    <el-input :disabled="disabled" v-model="couponForm.money" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="money" label="领取时间:">
                    <el-input :disabled="disabled" v-model="couponForm.money" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="money" label="使用时间:">
                    <el-input :disabled="disabled" v-model="couponForm.money" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="money" label="关联订单:">
                    <el-input :disabled="disabled" v-model="couponForm.money" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        <Pagination />
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
import SuccessTip from '@/components/SuccessTip.vue'
    export default {
        components:{
            Pagination,SuccessTip
        },
        data() {
            return {
              detailVisible:false,// 新增
              couponForm:{}, //新增信息
              disabled:true,
              searchDate:'',
              is_border:-1,
                topList:[
                    {
                        data:15802,
                        title:'充电总量(度)',
                        url:require('@/images/home/total_charging.png'),
                        circle:20
                    },
                    {
                        data:5081,
                        title:'充电总时长(分钟)',
                        url:require('@/images/home/total_time.png'),
                        circle:20
                    },
                    {
                        data:15000,
                        title:'充电总次数(次)',
                        circle:20,
                        url:require('@/images/home/total_count.png')
                    }
                ],
                qushi:[80,95,100,102,105,90,92,94,96,98,100,102,104,102,100,98,96,93,91,90,92,96,98,105,110,120,130,140,160,170,180,190,200],
                couponTableData: [
                    {
                        order: '1',
                        name: '新人券',
                        type: 0,
                        userId:'姜姜',
                        state:0,
                        draw_time:'2023.03.03 12:00:00',
                        id:1
                    },]
            }
        },
        mounted() {
            this.dianLiang()
        },
        methods: {
            goDetail(id,type){// banner详情
                this.detailVisible = true
                this.alert_title = '查看明细'
            },
          searchTimeCheck(val){
            this.is_border = val
            if(val == 0){
              const date = new Date();
              let year = date.getFullYear() // 年
              let month = date.getMonth() + 1; // 月
              let day = date.getDate(); // 日
              const start = new Date();
              console.log('今天',[year,month,day].join('-'))
            } else if(val == 1){
              const yesterday = new Date();
              yesterday.setTime(yesterday.getTime() - 3600 * 1000 * 24);
              let yesterday_year = yesterday.getFullYear() // 年
              let yesterday_month = yesterday.getMonth() + 1; // 月
              let yesterday_day = yesterday.getDate(); // 日
              console.log('昨天',[yesterday_year,yesterday_month,yesterday_day].join('-'))
            } else if(val == 2){
              const start = new Date();
              const end = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              let start_year = start.getFullYear() // 年
              let start_month = start.getMonth() + 1; // 月
              let start_day = start.getDate(); // 日
              let end_year = end.getFullYear() // 年
              let end_month = end.getMonth() + 1; // 月
              let end_day = end.getDate(); // 日
              console.log('7天前',[start_year,start_month,start_day].join('-'))
              console.log('到今天',[end_year,end_month,end_day].join('-'))
            } else{
              const start = new Date();
              const end = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
              let start_year = start.getFullYear() // 年
              let start_month = start.getMonth() + 1; // 月
              let start_day = start.getDate(); // 日
              let end_year = end.getFullYear() // 年
              let end_month = end.getMonth() + 1; // 月
              let end_day = end.getDate(); // 日
              console.log('30天前',[start_year,start_month,start_day].join('-'))
              console.log('到今天',[end_year,end_month,end_day].join('-'))
            }
          },
          search(){
            
          },
            dianLiang(){
            var myChart = this.$echarts.init(document.getElementById("chongdianliang"));
            myChart.setOption({
            //   title:{
            //     text:'指标趋势'
            //   },
              legend:{
                right: "15%", //右侧
                selectedMode: 'single',
                data:['总发行量','已领取','未使用','已使用','已过期'],
                icon: "roundRect",
                 textStyle: {
                      color: '#ccc'
                  },
                  itemWidth:40, 
                  itemHeight:20,
              },
              tooltip:{
                trigger: 'axis',
                axisPointer: { type: 'cross' }
              },
              xAxis:{ 
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                interval:0,
                boundaryGap:false, //坐标两边不留白
                inside: false,//本来是true，改为false后将图形中的字移到图形外边
                textStyle: {
                    color: '#949BBE'//修改坐标轴字体颜色
                },
                fontSize:14//调整坐标轴字体大小
            },
                type:'category',
                data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
                axisLine: {
                  lineStyle: {
                    color: '#666666'
                 },

                }
              },

              yAxis:{
                axisLabel: {
                interval:0,
                inside: false,//本来是true，改为false后将图形中的字移到图形外边
                textStyle: {
                    color: '#949BBE'//修改坐标轴字体颜色
                },
                fontSize:12,//调整坐标轴字体大小
                },

                  //虚线背景
                  splitLine: {
                      show: true,
                      lineStyle:{
                          type:'dashed'
                      }
                  },
                axisLine: {show:false,lineStyle:{color:"white"}}
              },
              series:[
                {   
                  name:'',
                    // width:"50%",
                    type:"funnel", 
                    funnelAlign:"right",
                    label: { 
                      show: false,
                    },
                    data:[
                      {name:'总发行量'},
                      {name:'已领取'},
                      {name:'未使用'},
                      {name:'已使用'},
                      {name:'已过期'},
                    ]
                },


                {
                  
                  // 变得圆滑
                  smooth: true,
                  // 隐藏折点
                  showSymbol: false,
                  // 改变线条的颜色和粗细
                  lineStyle: {
                      color: '#335BF5',
                      width: 5
                  },

                name:"销量",
                type:'line',
                data:this.qushi,
                areaStyle: {
                  color: {
                    type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 2,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#c8d3fc' // 0%处的颜色为红色
                        }, {
                            offset: 0.5,
                            color: '#fefeff' // 100%处的颜色为蓝
                        }]
                  },
                  opacity: 0.5
                },
                smooth: true,
                 itemStyle: {
                    color: {
                        type: 'linear', // 线性渐变
                        x: 10,
                        y: 0,
                        x2: 10,
                        y2: 9,
                        colorStops: [{
                            offset: 0,
                            color: '#335BF5' // 0%处的颜色为红色
                        }, {
                            offset: 1,
                            color: '#335BF5' // 100%处的颜色为蓝
                        }]
                    }
                 }
              }
              ]
            })
          },
        }
    }
</script>

<style lang="less" scoped>
.topBox{
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100.03px;
}
.h2{
    background: white;
    overflow: hidden;
    padding-bottom:38px ;
}
h2{
    margin-top: 24px;
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    margin-bottom: 16px;
    text-align: left;
}
.top_box_item{
    flex: 1;
    position: relative;
    padding-left:16.03px;
    padding-right: 16.03px;
    padding-bottom: 25.97px;
    background: #FFFFFF;
    border-radius: 6.02px 6.02px 6.02px 6.02px;
    margin-right: 16.03px;
    opacity: 1;
    flex-wrap: nowrap;
    min-width: 188.02px;
    min-height:100.03px ;
    box-shadow: 1px 0px 18px 3px rgba(22,91,255,0.03);
}
.top_box_item:last-child{
    margin-right: 0px;
}

.icon{
    float: right;
    margin-top: 24.99px;
    margin-right: 7.98px;
    width: 49.98px;
    height: 49.98px;
    background: #EDF3FF;
    border-radius: 49.98px;
    line-height: 49.98px;
    opacity: 1;
}
.circle_data{
    float: right;
    margin-top: 100px;
    margin-right: -35px;
    text-align: center;
}
.icon img{
    width: 25.97px;
    height: 25.97px;
    vertical-align: middle;
}

.top_box_data{
    float: left;
    margin-left: 16.03px;
    margin-top: 28px;
}
.data_top{
    height: 24.01px;
    font-size: 24.01px;
    text-align: left;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 24.01px;
}
.data_bottom{
    margin-top: 10.01px;
    height: 11.97px;
    font-size: 11.97px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #949BBE;
    line-height: 11.97px;
}
.eCharts{
    background: white;
    width: 100%;
    padding-left: 16.03px;
    padding-right: 16.03px;
    padding-top:31.99px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.eCharts>div{
    margin-right: 16.03px;
    width: 578.97px;
    height: 578.97px;
}
.searchBox{
  width: 100%;
  height: 84px;
  text-align: left;
  line-height: 84px;
  margin-bottom: 31.99px;
  background: #FFFFFF;
  border-radius: 6.02px 6.02px 6.02px 6.02px;
  opacity: 1;
}
.searchBox span{
  display: inline-block;
  text-indent: 16.03px;
}
.el-date-picker{
  height: 35.98px;
  float: left;
}
.days{
  display: inline-block;
  height: 35.98px;
  padding-left: 11.97px;
  padding-right: 11.97px;
  line-height: 35.98px;
  background: #F6F7FB;
  border-radius: 3.99px 3.99px 3.99px 3.99px;
  opacity: 1;
  margin-right: 11.97px;
  cursor: pointer;
}
.days:first-child{
  margin-left: 24.01px;
}
.zuo{
  float: left;
}
.you{
  float: left;
}
.border{
  border: .98px solid #1989FA;
}
.btns{
  float: right;
  margin-right: 16.03px;
}
.search{
  background: #165BFF;
  color: white;
  border: 0;
}
.reset{
  background: #edf0f6;
  border: 0;
  color: #666666;
}
.bigBox{
  text-align: center;
  width: 100%;
  background: #fbfcfe;
}
.data_circle{
    display: flex;
    width: 100%;
    height: 20px;
    margin-top: 17px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 12px;
}

</style>
<style>
.el-range-input{
    background: #f0f1f6;
    font-size: 11.97px !important;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.detailBtn{
    margin-right: 8px;
    display: inline-block;
    color: #039FF6;
    cursor: pointer;
}
</style>

<style>
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #f32823 !important;
  background-color: #f32823 !important;
}
.el-checkbox__inner:hover {
  border-color: #f32823 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #f32823 !important;
}
.el-checkbox {
  color: #111;
  margin-right: 30px;
  font-size: 16px;
  margin-bottom: 18px;
}
.el-checkbox__inner {
  width: 16px;
  height: 16px;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #111 !important;
}
.el-checkbox__inner::after {
  left: 4px;
  height: 9px;
  width: 5px;
  top: 0;
}
.bbb{
    background: white;
}
.bottom_box{
    width: 100%;
    padding-top: 24px;
    background: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
}
</style>